<template>
	<CommonCard title="累计用户数" :value="numberFormat(usersTotal)">
		<div ref="barChartRef" style="width: 100%; height: 100%"></div>
		<template #footer>
			<span>日同比</span>
			<span class="emphasis">{{ numberFormat(userGrowthLastDay) }}%</span>
			<span class="increment"></span>
			<span>&nbsp; 月同比</span>
			<span class="emphasis">{{ numberFormat(userGrowthLastMonth) }}%</span>
			<span class="increment"></span>
		</template>
	</CommonCard>
</template>

<script lang="ts">
export default {
	name: 'TotalUser',
}
</script>

<script lang="ts" setup>
import useFormat from '@/hooks/useFormat'
import { useReportDataStore } from '@/stores/reportData'
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import CommonCard from './CommonCard.vue'
import { ref, computed, onMounted } from 'vue'

const { numberFormat } = useFormat()
const reportDataStore = useReportDataStore()

//获取标签对象
const barChartRef = ref()
let barChart: EChartsType

//累计用户数
const usersTotal = computed(() => reportDataStore.reportData.usersTotal)
//上月用户数量
const usersLastMonth = computed(() => reportDataStore.reportData.usersLastMonth)
//日同比
const userGrowthLastDay = computed(
	() => reportDataStore.reportData.userGrowthLastDay
)
//月同比
const userGrowthLastMonth = computed(
	() => reportDataStore.reportData.userGrowthLastMonth
)

const getOption = () => {
	return {
		xAxis: {
			show: false,
			min: 0,
			max: 100,
		},
		yAxis: {
			show: false,
			data: ['AAA'],
		},
		series: {
			name: '用户增长量',
			type: 'bar',
			data: [78],
			barWidth: 10,
			showBackground: true,
			itemStyle: {
				color: 'orange',
			},
		},
		grid: {
			left: 0,
			right: 0,
		},
		tooltip: {
			trigger: 'axis',
		},
		label: {
			show: true,
			formatter: '|',
			position: 'right',
			color: 'blue',
		},
	}
}

onMounted(() => {
	barChart = echarts.init(barChartRef.value)

	barChart.setOption(getOption())

	window.addEventListener('resize', () => {
		barChart.resize()
	})
})
</script>

<style scoped></style>
